<template>
    <div>
        <f7-list media-list class="search-list" v-if="list.length > 0">
            <li v-for="(item, index) in list" :key="index" class="content-box">
                <img v-if="!item.certAttachmentId && !item.attachmentId" src="../../../../../assets/img/qzjx/defaultAvatar.png" width="60" class="sculpture"
                    height="88" />
                <img v-else-if="item.certAttachmentId" :src="imgSrc(item)" width="60" height="88" class="sculpture" @click="previewImg(imgSrc(item))"/>    
                <img v-else :src="$util.getImgSrc(item.attachmentId)" width="60" height="88" class="sculpture" @click="previewImg($util.getImgSrc(item.attachmentId))"/>
                <div class="right-box">
                    <div class="total-top">
                        <span class="code text-overflow-two">{{ item.personName }}</span>
                        <f7-icon f7="xmark" size="14px" v-if="!isDisabled"  @click.native="deleteItem(index)"></f7-icon>
                    </div>
                    <div class="total-bottom">
                        <div class="name-box">
                            <span>发证机关：</span><span class="value">{{ item.certStand || "--" }}</span>
                        </div>
                        <div class="name-box">
                            <span>证书有效期：<span class="value">{{ showTime1(item.certEndDate)}}</span></span>
                        </div>
                    </div>
                </div>
            </li>
        </f7-list>
        <v-empty v-else description="暂无数据" />
    </div>
</template>

<script>
import Config from "@/libs/config.js";
import { ImagePreview } from 'vant';

export default {
    name: 'person-list',
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        isDisabled:{
            type:Boolean,
            default:false,
        }
    },
    data () {
        return {
            download: Config.api.download,
        }
    },
    created(){
    },
    methods: {
        showTime1(date) {
            if (date) {
                return formatter.formatDate(date, 'yyyy-MM-dd')
            } else {
                return '--'
            }
        },
        deleteItem (index) {
            this.$emit("delete", index);
        },
        previewImg(url){
            ImagePreview({
                images:[url],
                closeable:true
            });
        },
        imgSrc(item){
            if(item.origin == 'rhjg'){
                return  this.$util.getOutsideImgSrc(item.certAttachmentId)
            }else{
                return  this.$util.getImgSrc(item.certAttachmentId)
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../assets/css/commonPage.less');
li {
    &:first-child .content-box {
        margin-top: 0;
    }

    .content-box {
        background: #FFFFFF;
        box-shadow: 0px 4px 18px 0px rgba(16, 67, 136, 0.1);
        border-radius: 16px;
    }
    .sculpture{
        object-fit: cover;
    }
    .right-box {
        margin-left: 10px;
    }

    .total-top {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @{deep}.icon {
            color: #B9C1CD;
        }

        .code {
            font-weight: 600;
            color: #242424;
            font-size: 16px;
        }
    }

    .total-bottom {
        font-size: 14px;
        font-weight: 400;
        color: #8995AC;

        .name-box {
            margin-bottom: 5px;
        }
    }
}
</style>
